<script setup lang="ts">
import {computed} from 'vue';
import {useRoute} from 'vue-router';
import type {MenuInfo, MenuMode} from 'ant-design-vue/es/menu/src/interface';
import {SimpleScrollbar} from '@sa/materials';
import {transformColorWithOpacity} from '@sa/utils';
import type {RouteKey} from '@elegant-router/types';
import {useAppStore} from '@/store/modules/app';
import {useThemeStore} from '@/store/modules/theme';
import {useRouteStore} from '@/store/modules/route';
import {useRouterPush} from '@/hooks/common/router';
import {useTabStore} from "@/store/modules/tab";
import {useAuthStore} from "@/store/modules/auth";

defineOptions({
    name: 'BaseMenu'
});

interface Props {
    darkTheme?: boolean;
    mode?: MenuMode;
    menus: App.Global.Menu[];
}

const props = withDefaults(defineProps<Props>(), {
    mode: 'inline'
});

const route = useRoute();
const appStore = useAppStore();
const themeStore = useThemeStore();
const tabStore = useTabStore();
const routeStore = useRouteStore();
const authStore = useAuthStore();
const {routerPushByKey, routerPush} = useRouterPush();

const menuTheme = computed(() => (props.darkTheme ? 'dark' : 'light'));

const isHorizontal = computed(() => props.mode === 'horizontal');

const siderCollapse = computed(() => themeStore.layout.mode === 'vertical' && appStore.siderCollapse);

const inlineCollapsed = computed(() => (props.mode === 'inline' ? siderCollapse.value : undefined));

const selectedKeys = computed(() => {
    const {hideInMenu, activeMenu} = route.meta;
    const name = route.name as string;

    const routeName = (hideInMenu ? activeMenu : name) || name;

    return [routeName];
});

const openKeys = computed(() => {
    if (isHorizontal.value || inlineCollapsed.value) return [];

    const [selectedKey] = selectedKeys.value;

    if (!selectedKey) return [];

    return routeStore.getSelectedMenuKeyPath(selectedKey);
});

const headerHeight = computed(() => `${themeStore.header.height}px`);

const selectedBgColor = computed(() => {
    const {darkMode, themeColor} = themeStore;

    const light = transformColorWithOpacity(themeColor, 0.1, '#ffffff');
    const dark = transformColorWithOpacity(themeColor, 0.3, '#000000');

    return darkMode ? dark : light;
});

function handleClickMenu(menuInfo: MenuInfo) {
    const key = menuInfo.key as RouteKey;
    const query = routeStore.getRouteQueryOfMetaByKey(key);
    if (key === 'home') {
        tabStore.clearTabs();
        if(authStore.userInfo.userType === 3){
            routerPush(`/breedAquatics`);
        } else {
            const menusKey = sessionStorage.getItem('menusKey')
            if(menusKey === 'system'){
                routerPush(`/dashboard`);
            }
            if(menusKey === 'breedAquatics'){
                routerPush(`/breedAquatics`);
            }
        }
    } else {
        routerPushByKey(key, {query});
    }
}
</script>

<template>
    <SimpleScrollbar class="menu-wrapper heh-container" :class="{ 'select-menu': !darkTheme }">
        <AMenu
            :mode="mode"
            :theme="menuTheme"
            :items="menus"
            :selected-keys="selectedKeys"
            :open-keys="openKeys"
            :inline-collapsed="inlineCollapsed"
            :inline-indent="18"
            class="size-full transition-300 border-0!"
            :class="{ 'bg-container!': !darkTheme, 'heh-container': !darkTheme, 'horizontal-menu': isHorizontal }"
            @click="handleClickMenu"
        />
    </SimpleScrollbar>
</template>

<style lang="scss" scoped>
.heh-container {
    background: #1A2C63 !important;

    :deep(.ant-menu-item) {
        color: #fff !important;
    }

    :deep(.ant-menu-item) {
        color: #fff !important;
    }

    :deep(.ant-menu-submenu) {
        color: #fff !important;
    }

    :deep(.ant-menu-submenu-selected > .ant-menu-submenu-title) {
        color: #fff !important;
    }

    :deep(.ant-menu-item-selected) {
        color: #000 !important;
    }

    :deep(.ant-menu-light:not(.ant-menu-horizontal) .ant-menu-item:not(.ant-menu-item-selected):hover) {
        background: rgba(0, 0, 0, 0.2) !important;
    }

    :deep(.ant-menu-light .ant-menu-submenu-title:hover:not(.ant-menu-item-selected):not(.ant-menu-submenu-selected)) {
        color: #fff !important;
        background: rgba(0, 0, 0, 0.2) !important;
    }

}

.menu-wrapper {
    :deep(.ant-menu-inline) {
        .ant-menu-item {
            width: calc(100% - 16px);
            margin-inline: 8px;
        }
    }

    :deep(.ant-menu-submenu-title) {
        width: calc(100% - 16px);
        margin-inline: 8px;
    }

    :deep(.ant-menu-inline-collapsed) {
        > .ant-menu-item {
            padding-inline: calc(50% - 14px);
        }

        .ant-menu-item-icon {
            vertical-align: -0.25em;
        }

        .ant-menu-submenu-title {
            padding-inline: calc(50% - 18px);
        }
    }

    :deep(.ant-menu-horizontal) {
        .ant-menu-item {
            display: flex;
            align-items: center;
        }

        .ant-menu-submenu-title {
            display: flex;
            align-items: center;
        }
    }
}

.select-menu {
    :deep(.ant-menu-inline) {
        .ant-menu-item-selected {
            background-color: v-bind(selectedBgColor);
        }
    }
}

.horizontal-menu {
    line-height: v-bind(headerHeight);
}
</style>
